<template>
  <view
    class="course-list overflow-hidden flex-1 flex gap-col-6px gap-row-8px overflow-y-overlay h-250px"
    key="courseList"
  >
    <courseItem
      :item="course"
      v-for="(course, index) in filterList as any"
      :key="'course' + course.id"
      :index="index + 1"
      @click="handleClickItem(course)"
    />
    <el-empty v-if="!filterList.length" class="!p0 m-auto" description="暂无数据" />
  </view>
</template>

<script setup lang="ts">
import courseItem from './courseItem.vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
const filterList = computed(() => props.list?.filter((item: any) => item?.parentId === 0))
const emit = defineEmits(['clickItem'])
const handleClickItem = (course: any) => {
  console.log(course)
  emit('clickItem', course)
}
</script>

<style lang="scss" scoped>
.course-list {
  flex-wrap: wrap;
}
</style>
